<template>
  <div class="change-class body-bg" :class="{noScroll:showPop}">
    <div v-if="!initLoading">
      <!-- top -->
      <div class="top">
        <swiper v-if="classDetail.goods_imgs.length" class="my-swiper" easing-function="linear" circular="true" :indicator-dots="indicatorDots" autoplay="true" :interval="3000" indicator-color="#ccc" indicator-active-color="#00B8EE">
          <swiper-item v-for="(item,index) in classDetail.goods_imgs" :key="index">
            <img :src="item" alt="banner">
          </swiper-item>
        </swiper>
        <img v-else class="my-swiper" src="https://img.yzcdn.cn/vant/cat.jpeg" alt="banner" width="100%">
        <p class="overflow-one class-title">{{classDetail.name}}</p>
        <ul class="class-info">
          <li>
            <p class="discount-price">￥{{classDetail.mall_cost}}</p>
            <p class="class-tip items-tips">
              <span class="items-tip-biaoqie" v-if="classDetail.is_transfer == '1'">随时插班</span>
              <span class="items-tip-biaoqie" v-if="classDetail.retreat_rule == '1'">随时退班</span>
              <span class="items-tip-biaoqie" v-if="classDetail.is_audition == '1'">免费试听</span>
            </p>
          </li>
          <li v-if="from != '2'">
            <img class="class-icon" src="/static/images/singUp/class-icon1.png" alt="icon">
            <p class="class-state" v-if="classDetail.is_enforce == '1'">已下架</p>
            <p class="class-state" v-if="classDetail.is_enforce == '2'">已结课</p>
            <p class="class-state" v-if="classDetail.is_enforce == '3'">已满班</p>
            <p class="class-state" v-if="classDetail.is_enforce == '4'">正在上课</p>
            <p class="class-state" v-if="classDetail.is_enforce == '5'">火爆招生中</p>
          </li>
        </ul>
      </div>
      <!-- 套餐 -->
      <div class="taocan" v-if="from != '3' && isTaoCan =='1'" @click="goTaocan">
        <div class="left">
          <img class="icon-taocan" src="/static/images/singUp/singUp-icon4.png" alt="icon">
          <span class="tip-text">课程套餐组合更优惠，快去报名吧~</span>
        </div>
        <van-icon name="arrow" color="#00B8EE" />
        <!-- <img class="icon-more" src="/static/images/singUp/more2.png" alt="icon"> -->
      </div>
      <!-- 课程信息 -->
      <div class="class-information">
        <p class="title">课程信息</p>
        <ul class="information-cont">
          <li class="information-items border-bottom">
            <label class="items-label">教练</label>
            <span class="items-span">{{classDetail.teacher_name}}</span>
          </li>
          <li class="information-items border-bottom" @click="showClassDet">
            <label class="items-label">课程安排</label>
            <span class="items-span">{{open_date}} 至 {{end_date}}</span>
            <img class="icon-more" src="/static/images/singUp/more1.png" alt="icon">
          </li>
          <li class="information-items border-bottom">
            <label class="items-label" style="border:0"></label>
            <span class="items-span">{{classDetail.goods_week}}</span>
          </li>
          <li class="information-items border-bottom">
            <label class="items-label">上课地点</label>
            <span class="items-span">{{classDetail.address}}</span>
          </li>
        </ul>
      </div>
      <!-- 付款信息 -->
      <ul v-if="from == '2'" class="price-infor">
        <li>原课时费：<span>￥{{classDetail.original_amount}}</span></li>
        <!-- <li>商品费：<span>-￥{{classDetail.productPrice}}</span></li>
        <li>优惠：<span>-￥{{classDetail.discount}}</span></li> -->
        <li>请假课时抵扣：<span>-￥{{classDetail.deduction_amount}}</span></li>
        <li class="yingfu">应付总额：<span>￥{{payment_amount*1}}</span></li>
      </ul>
      <!-- 报名button -->
      <div v-if="from == '1'" class="submit-cont" @click="goOrder(classDetail.name,classDetail.address,open_date,end_date,classDetail.goods_week,classDetail.original_amount,classDetail.deduction_amount,classDetail.payment_amount,classDetail.goods_id)">
        <div class="submit-btn">{{!isChaBan ? "立即报名" : "插班"}}</div>
      </div>
      <!-- 续费 -->
      <div v-if="from == '2'" class="submit-cont" @click="goOrder(classDetail.name,classDetail.address,open_date,end_date,classDetail.goods_week,classDetail.original_amount,classDetail.deduction_amount,classDetail.payment_amount,classDetail.goods_id)">
        <div class="submit-btn">点击续费</div>
      </div>
    </div>
    <div v-else class="init-loading"><van-loading type="spinner" color="#1989fa" /></div>
    <!-- pop -->
    <van-popup
      :overlay="true"
      :show="showPop"
      closeable
      position="bottom"
      custom-style="width:100%;height:50%"
      @close="onClosePop"
    >
      <div v-if="showPop">
        <p class="pop-title">课时安排({{classDetail.lessons_minutes.minutes}},{{classDetail.lessons_minutes.lessons_count}})</p>
        <ul v-if="classDetail.lessons.length" class="list-cont">
          <li class="list-items border-bottom" :class="{finish: item.is_finished =='1'}" v-for="(item,index) in classDetail.lessons" :key="index">
            <p class="title">第{{item.lesson_num}}课时</p>
            <p class="text">{{item.open_date}} 周{{item.goods_week}} {{item.class_time}}</p>
            <span class="end" v-if="item.is_finished =='1'">结</span>
          </li>
        </ul>
        <div v-else>暂无课次安排</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import store from '@/store/globalStore'
export default {
  data() {
    return {
      from: "", // 记录路由来源 1 报名 2 续费 3 套餐
      isTaoCan: "", // 课程是否为套餐
      open_date: "",
      end_date: "",
      goods_id: "",
      isChaBan: false, // 是否是插班
      indicatorDots: false, // 是否显示指示点，如果banner图多于1张则显示，否则默认不显示
      initLoading: true, // 初始加载
      popTitle: "", // 弹窗标题
      showPop: false, // 展示弹窗
      classDetail: {
        banner: ["https://img.yzcdn.cn/vant/cat.jpeg", "https://img.yzcdn.cn/vant/cat.jpeg"],
        name: "半年-60分钟课程-U6班",
        price: "599",
        qingjia: "59",
        discountPrice: "500",
        tips: "随时插班",
        state: 1, // 是否开课 1是 2否
        isTao: 1, // 是否有套餐
        teacherName: "张老师",
        classDate: "2020-01-31 至 2020-12-31",
        week: "周六",
        time: "09：30 - 10：30",
        address: "北京市海淀区001",
      }
    }
  },
  onLoad(e) {
    // url中传递了from参数，1 来自报名 2 来自续费 3 套餐
    console.log(e)
    this.from = e.from;
    this.goods_id = e.goods_id;
    this.isTaoCan = e.isTaoCan;
    this.end_date = e.end_date;
    this.open_date = e.open_date;
    this.renew_goods_id = "";
    if(e.from == '2'){
      this.renew_goods_id = e.renew_goods_id;
    }
    this.getGoodsDetailInformation();
  },
  onShow() {
    
  },
  onUnload() {
    // this.initLoading = true;
  },
  methods: {
    // 详情
    getGoodsDetailInformation(){
      this.$fetch.getGoodsDetailInformation({
        goods_id: this.goods_id,
        renew_goods_id: this.renew_goods_id || ""
      }).then(res=>{
        this.initLoading = false;
        this.classDetail = res.result;
        if(this.classDetail.banner.length>1){
          this.indicatorDots = true;
        }
      }).catch(err=>{
        this.initLoading = false;
      })
      
    },
    // 查看套餐
    goTaocan(goods_id,renew_goods_id) {
      let that = this;
      wx.redirectTo({
        url: `/pages/package/main?from=${that.from}&goods_id=${that.goods_id}&renew_goods_id=${renew_goods_id}`
      })
    },
    // 查看/关闭课程详情
    showClassDet() {
      this.showPop = true;
    },
    onClosePop() {
      this.showPop = false;
    },
    // 下单
    goOrder(name,address,open_date,end_date,goods_week,original_amount,deduction_amount,payment_amount,goods_id) {
      let that = this;
      wx.navigateTo({
        url: `/pages/signUpOrder/main?from=${that.from}&name=${name}&address=${address}&open_date=${open_date}&end_date=${end_date}&goods_week=${goods_week}&original_amount=${original_amount}&deduction_amount=${deduction_amount}&payment_amount=${payment_amount}&goods_id=${goods_id}`
      })
    }
  },
}
</script>

<style lang="less" scope>
.pop-title{
  width: 100%;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  line-height: 50px;
  color: #333;
}
.list-cont{
  width: 100%;
  .list-items{
    width: 100%;
    padding: 12px 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    &.finish{
      background: #f3f3f3;
    }
    &:last-child{
      border: 0;
    }
    .end{
      width: 22px;
      height: 22px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 100%;
      border: 0.5px solid #00B7EE;
      position: absolute;
      right: 15px;
      color: #00B7EE;
      font-size: 14px;
      font-weight: bold;
    }
    .title{
      font-size: 14px;
      color: #333;
      margin-bottom: 10px;
    }
    .text{
      font-size: 12px;
      color: #999;
    }
  }
}
.change-class{
  width: 100%;
  &.noScroll{
    height: 100vh;
    overflow: hidden;
  }
  .top{
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    background: #fff;
    .my-swiper{
      width: 100%;
      height: 150px;
      img{
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    .class-title{
      width: 100%;
      font-size: 18px;
      color: #515151;
      margin-top: 15px;
    }
    .class-info{
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
      .discount-price{
        font-size: 18px;
        color: #FF3032;
      }
      .class-tip{
        margin: 10px 0 12px 0;
        &.items-tips{
          width: 100%;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          .items-tip-biaoqie{
            padding: 2px 8px;
            border: 1px solid rgba(0,183,238,1);
            border-radius: 8px;
            font-size: 12px;
            color: #00B7EE;
            margin-right: 12px;
          }
        }
      }
      .class-icon{
        width: 20px;
        height: 20px;
        display: block;
        margin: 0 auto;
      }
      .class-state{
        font-size: 12px;
        color: #FF3032;
        margin-top: 8px;
      }
    }
  }
  .taocan{
    width: 100%;
    padding: 14px 25px 14px 14px;
    box-sizing: border-box;
    background: #DAF6FF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left{
      display: flex;
      align-items: center;
      .icon-taocan{
        width: 26px;
        height: 26px;
        display: block;
      }
      .tip-text{
        font-size: 14px;
        color: #00B7EE;
        margin-left: 10px;
      }
    }
    .icon-more{
      width: 20px;
      height: 5px;
      display: block;
    }
  }
  .class-information{
    width: 100%;
    margin-top: 10px;
    .title{
      width: 100%;
      line-height: 54px;
      padding: 0 14px;
      box-sizing: border-box;
      background: #fff;
      font-size: 16px;
      color: #525252;
      margin-bottom: 10px;
    }
    .information-cont{
      width: 100%;
      background: #fff;
      padding: 0 25px 0 20px;
      box-sizing: border-box;
      overflow: hidden;
      margin-bottom: 10px;
      .information-items{
        width: 100%;
        padding: 12px 0;
        display: flex;
        align-items: center;
        &:last-child{
          border-bottom: 0;
        }
        .items-label{
          min-width: 74px;
          width: 74px;
          font-size: 14px;
          color: #7A7A7A;
          border-right: 0.5px solid #dcdcdc;
          margin-right: 12px;
          line-height: 24px;
        }
        .items-span{
          flex-grow: 1;
          font-size: 14px;
          color: #101010;
        }
        .icon-more{
          width: 20px;
          height: 5px;
          display: block;
        }
      }
    }
  }
  .price-infor{
    width: 100%;
    padding: 15px 25px 20px 25px;
    box-sizing: border-box;
    background: #fff;
    margin-bottom: 10px;
    li{
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 14px;
      color: #676767;
      font-size: 14px;
      span{
        color: #000;
      }
      &:last-child{
        margin-bottom: 0;
      }
    }
    .yingfu{
      color: #676767;
      font-weight: bold;
      span{
        color: #FF3333;
      }
    }
  }
  .submit-cont{
    width: 100%;
    padding: 60px 18px;
    box-sizing: border-box;
    background: #fff;
    .submit-btn{
      width: 100%;
      height: 44px;
      line-height: 44px;
      background:rgba(0,184,238,1);
      border-radius: 5px;
      color: #fff;
      font-size: 16px;
      text-align: center;
    }
  }
}
</style>
